<template>
  <div style="padding: 20px 0">
    <el-table :data="dataList" border style="width: 100%">
      <el-table-column
        prop="experience"
        label="上限经验"
        min-width="50"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="grade"
        label="等级"
        min-width="50"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="rewardText"
        label="奖励文本"
        min-width="50"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        min-width="50"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="updateTime"
        label="修改时间"
        min-width="50"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="操作"
        min-width="50"
        width="100"
        align="center"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-popconfirm
            title="确定删除此数据吗？"
            @onConfirm="deleteData(scope.row)"
          >
            <el-button slot="reference" type="text" size="mini" v-no-more-click
              >删除</el-button
            >
          </el-popconfirm>
          <el-button
            style="margin-left: 10px"
            type="text"
            size="mini"
            @click="reviseData(scope.$index, scope.row)"
            v-no-more-click
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="query.pagesize"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>
    <el-form>
      <el-form-item>
        <el-button
          @click="close"
          v-no-more-click
          style="margin-top: 20px; text-align: center"
          >关闭</el-button
        >
      </el-form-item>
    </el-form>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :before-close="dialogClose"
      append-to-body
      width="30%"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="分类" prop="classify">
          <el-input v-model="form.classify" disabled></el-input>
        </el-form-item>
        <el-form-item label="上限经验" prop="experience">
          <el-input v-model="form.experience" type="number"></el-input>
        </el-form-item>
        <el-form-item label="等级" prop="grade">
          <el-input-number style="width:100%" v-model="form.grade" type="number" :min="1" :max="100"></el-input-number >
        </el-form-item>
        <el-form-item label="奖励文本" prop="rewardText">
          <el-input
            v-model="form.rewardText"
            type="textarea"
            :rows="3"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getGradePage,
  postGradeSave,
  getGradeFindOne,
  deleteGrade,
} from "../../../src/assets/js/api";

export default {
  name: "GradeDia",
  props: ["classify", "valueName"],
  data() {
    return {
      query: {
        pagesize: 10,
        pageNo: 1,
        classify: "",
      },
      current: 1,
      pages: 1,
      total: 10,
      dataList: [],
      dialogVisible: false,
      title: "",
      form: {
        classify: "",
        experience: "",
        grade: "",
        rewardText: "",
      },
      rules: {
        classify: [{ required: true, message: "请输入分类", trigger: "blur" }],
        experience: [
          { required: true, message: "请输入上限经验", trigger: "blur" },
        ],
        grade: [{ required: true, message: "请输入等级", trigger: "change" }],
        rewardText: [
          { required: true, message: "请输入奖励文本", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.query.classify = this.classify;
    this.getList();
  },
  methods: {
    getList() {
      getGradePage(this.query).then((res) => {
        this.dataList = res.data.records;
        this.currentPage = res.data.current;
        this.total = res.data.total;
        this.pages = res.data.pages;
      });
    },
    renderHeader(h) {
      let a = [
        h(
          "el-button",
          {
            props: {
              size: "mini",
              type: "primary",
            },
            on: {
              click: () => {
                this.addData();
              },
            },
          },
          "新增"
        ),
      ];
      return h("div", a);
    },
    deleteData(row) {
      deleteGrade(row.id).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
        this.query.pageNo = 1;
        this.getList();
      });
    },
    reviseData(index, row) {
      this.title = "修改";
      this.dialogVisible = true;
      getGradeFindOne(row.id).then((res) => {
        this.form.id = res.data.id;
        this.form.experience = res.data.experience;
        this.form.grade = res.data.grade;
        this.form.rewardText = res.data.rewardText;
      });
      this.form.classify = this.valueName;
    },
    addData() {
      this.title = "新增";
      this.form.classify = this.valueName;
      if (this.form.id) {
        delete this.form.id;
      }
      this.dialogVisible = true;
    },
    dialogClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
          this.$refs.form.resetFields();
        })
        .catch(() => {});
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
      this.form.classify = this.classify;
          postGradeSave(this.form).then((res) => {
            this.dialogVisible = false;
            if (res.code == 200) {
              this.$message.success(res.message);
              this.$refs.form.resetFields();
            } else {
              this.$message.error(res.message);
              this.$refs.form.resetFields();
            }
            this.getList();
          });
        } else {
          return false;
        }
      });
    },
    close() {
      this.$emit("draweVisible", false);
    },
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageNo = psize;
      this.getList();
    },
  },
};
</script>
<style lang="less"></style>
